<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">新增采购计划</div>
      <div class="main">
        <el-form ref="createList" :model="createList" :rules="createListRules" auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>采购材料名称</label>
              <el-form-item prop="name">
                <el-input
                  ref="name"
                  v-model="createList.name"
                  placeholder="请输入采购材料名称"
                  type="text"
                  name="name"
                  tabindex="1"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>种类</label>
              <el-form-item prop="type">
                <el-input
                  ref="type"
                  v-model="createList.type"
                  placeholder="请输入种类"
                  type="text"
                  name="type"
                  tabindex="2"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>型号</label>
              <el-form-item prop="model">
                <el-input
                  ref="model"
                  v-model="createList.model"
                  placeholder="请输入型号"
                  type="text"
                  name="model"
                  tabindex="3"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>单位</label>
              <el-form-item prop="company">
                <el-input
                  ref="company"
                  v-model="createList.company"
                  placeholder="请输入单位"
                  type="text"
                  name="company"
                  tabindex="4"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>数量</label>
              <el-form-item prop="number">
                <el-input
                  ref="number"
                  v-model="createList.number"
                  placeholder="请输入数量"
                  type="text"
                  name="number"
                  tabindex="5"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>使用部位</label>
              <el-form-item prop="userPart">
                <el-input
                  ref="userPart"
                  v-model="createList.userPart"
                  placeholder="请输入使用部位"
                  type="text"
                  name="userPart"
                  tabindex="6"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>技术要求</label>
              <el-form-item prop="technicalRequirement">
                <el-input
                  ref="technicalRequirement"
                  v-model="createList.technicalRequirement"
                  placeholder="请输入技术要求"
                  type="text"
                  name="technicalRequirement"
                  tabindex="7"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>控制单价</label>
              <el-form-item prop="controlUnitPrice">
                <el-input
                  ref="controlUnitPrice"
                  v-model="createList.controlUnitPrice"
                  placeholder="请输入控制单价"
                  type="text"
                  name="controlUnitPrice"
                  tabindex="8"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <div class="row">
                <!-- <label>供应商类型</label>
                <el-form-item prop="type">
                  <el-select
                    v-model="createList.type"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in typeStatusList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item> -->
              </div>
              <!-- <label>控制价合计</label>
              <el-form-item prop="controlPriceSum">
                <el-input
                  ref="controlPriceSum"
                  v-model="createList.controlPriceSum"
                  :disabled="true"
                  placeholder="请输入控制价合计"
                  type="text"
                  name="controlPriceSum"
                  tabindex="8"
                  auto-complete="off"
                />
              </el-form-item> -->
            </div>
          </div>

          <div class="btnsubmit">
            <el-button
              type="primary"
              class="create"
              @click.native.prevent="submitData"
            >新增</el-button>
            <el-button
              type="primary"
              class="cancel"
              @click="comeBack"
            >取消</el-button>
          </div>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>

import { planCreate } from '@/api/Material'

export default {
  name: 'MaterialPlayCreate',
  components: {
  },
  data() {
    return {
      pathUrl: process.env.VUE_APP_BASE_API,
      createList: {
        type: '',
        name: '',
        company: '',
        controlPriceSum: '',
        controlUnitPrice: '',
        model: '',
        number: '',
        technicalRequirement: '',
        userPart: ''
      },
      createListRules: {
        type: [
          { required: true, message: '必选', trigger: 'change' }
        ],
        name: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        company: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        controlUnitPrice: [
          { required: true, message: '必填', trigger: 'change' },
          { pattern: /(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{2}$)/, message: '只能输入数字或者数字加小数点后两位' }
        ],
        model: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        number: [
          { required: true, message: '必填', trigger: 'change' },
          { pattern: /(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{2}$)/, message: '只能输入数字或者数字加小数点后两位' }
        ],
        technicalRequirement: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        userPart: [
          { required: true, message: '必填', trigger: 'change' },
          { pattern: /(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{2}$)/, message: '只能输入数字或者数字加小数点后两位' }
        ]
      },
      loading: false,
      typeStatusList: []
    }
  },
  computed: {

  },
  mounted() {
    // this.subcontractorStatus()
  },
  methods: {
    comeBack() {
      this.$router.go(-1)
    },
    // 获取类型
    // async subcontractorStatus() {
    //   const res = await getSubcontractorType()
    //   if (res.code === 200) {
    //     this.typeStatusList = res.data
    //   }
    // },
    submitData() {
      this.$refs.createList.validate(valid => {
        if (valid) {
          this.loading = true
          planCreate(this.createList).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '新增采购计划成功!',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
              this.$router.push({ name: 'MaterialPlay' })
            } else {
              this.$message({
                type: 'error',
                message: res.msg || 'error',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
      }
      .btnsubmit{
        text-align: center;
        margin-top: 60px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
    }
  }
  .imgtitle{
    font-size: 14px;
    font-weight: 400;
    color: rgba(247,181,0,.8);
    .addbtn{
      margin: 10px 0 0 0;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,.8);
      cursor: pointer;
      padding: 8px;
      height: 38px;
      text-align: center;
      line-height: 34px;
      background: #F7B500;
    }
  }
</style>
